<!-- eslint-disable no-undef -->
<template>
	<view>
		<xh-container
			:title="title"
			:hideBack="hideBack"
			:background="titlerBarBackground"
		>
			<view class="container">
				<view class="btn-wrapper">
					<button
						class="search-btn"
						@click="onClickFilter"
						:class="{ searchIsActive: buttonTextActive }"
					>
						{{ buttonText }}
					</button>
					<button
						v-if="!hideAddBtn"
						class="add-btn"
						@click="onClickAdd"
					>
						新增
					</button>
				</view>
				<view class="list-wrapper">
					<view
						class="empty-box"
						v-if="tableData.length === 0"
					>
						<xh-icons></xh-icons>
					</view>
					<slot
						v-else
						:data="tableData"
					></slot>
				</view>
				<slot name="summary"> </slot>
				<uni-pagination
					:current="pageNum"
					:total="total"
					title="标题文字"
					:pageSize="10"
					@change="onPageChange"
				/>
			</view>
		</xh-container>
		<xh-popup
			:title="`${title}筛选`"
			ref="xhPopup"
			@ok="handleClickOk"
		>
			<view style="min-height: 420px">
				<uni-forms
					:modelValue="formData"
					:label-width="80"
				>
					<uni-forms-item
						:label="item.label"
						:name="item.key"
						:key="item.key"
						v-for="item in searchList"
					>
						<uni-datetime-picker
							v-if="item.searchType === 'daterange'"
							v-model="formData.date"
							type="daterange"
						/>
						<xh-data-select
							v-else-if="Array.isArray(item.valueMapList)"
							v-model="formData[item.searchQueryCode || item.key]"
							:localdata="item.valueMapList"
							:placeholder="`请选择${item.label}`"
							@change="(sItem) => handleSelectChange(sItem, item)"
						></xh-data-select>
						<xh-data-select
							v-else-if="item.label === '检验编码'"
							v-model="formData.insCode"
							:localdata="showInspectList"
						/>
						<uni-easyinput
							v-else
							type="text"
							v-model="formData[item.key]"
							:placeholder="`请输入${item.label}`"
						/>
					</uni-forms-item>
				</uni-forms>
			</view>
		</xh-popup>
	</view>
</template>

<script>
// import { downloadExcel } from '../../utils/common';
export default {
	name: 'xh-list-container',
	props: {
		hideAddBtn: {
			type: Boolean,
			default: false,
		},
		labelWidth: {
			type: Number,
			default: 70,
		},
		// list-item显示的字段
		columns: {
			type: Array,
			default: () => [],
		},
		rowKey: {
			type: String,
			default: 'id',
		},
		hideBottomBar: {
			type: Boolean,
			default: true,
		},
		btnText: {
			type: [String],
			default: '',
		},
		titlerBarBackground: {
			type: String,
			default: '#ffffff',
		},
		title: {
			type: String,
			default: '标题',
		},
		hideBack: {
			type: Boolean,
			default: false,
		},
		request: {
			type: Function,
			default: () => [],
		},
		firstRequest: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			formData: {},
			total: 0,
			buttonText: '筛选',
			pageNum: 1,
			tableData: [],
			// eslint-disable-next-line no-undef
			bottomHeight: getApp().globalData.bottomSafetyHeight + 45 + 'px',
			selectedItem: {},
			showInspectList: [],
		};
	},
	created() {
		if (this.firstRequest) {
			this.fetchTableData();
		}
	},
	computed: {
		buttonTextActive() {
			return Object.values(this.formData).some((val) => val !== '');
		},
		listColumns() {
			return this.columns;
		},
		searchList() {
			const list = this.columns.filter((item) => item.search !== false);
			list.forEach((item, index) => {
				if (item.searchOrder == undefined) {
					item.searchOrder = index;
				}
			});
			list.sort((a, b) => a.searchOrder - b.searchOrder);
			return list;
		},
	},
	methods: {
		onClickExport() {
			// getFileName().then((res) => {
			// 	downloadExcel(res.msg);
			// });
		},
		handleSelectChange(sItem, item) {
			console.log('qw3er', sItem, item);
			this.$emit('changeSearchSelect', sItem, item);
		},
		onClickItem(item) {
			this.$emit('clickItem', item);
		},
		// 点击编辑
		onClickEdit() {
			if (this.selectedItem[this.rowKey]) {
				this.$emit('clickEdit', this.selectedItem);
			} else {
				this.$modal.msgError('请选择数据');
			}
		},
		// 点击筛选
		onClickFilter() {
			this.$refs.xhPopup.open('top');
		},
		// 点击新增
		onClickAdd() {
			this.$emit('clickAdd');
		},
		_query() {
			this.fetchTableData();
		},
		_resetQuery() {
			this.pageNum = 1;
			this.fetchTableData();
		},
		// 查询数据
		fetchTableData() {
			this.selectedItem = {};
			const { date, ...rest } = this.formData;
			const params = {
				...rest,
				pageNum: this.pageNum,
				pageSize: 10,
			};
			if (Array.isArray(date) && date.length > 1) {
				params.startTime = date[0];
				params.endTime = date[1];
			}
			// eslint-disable-next-line no-undef
			uni.showLoading({
				title: '加载中',
			});
			this.$emit('request', params);
			if (this.request) {
				this.request(params)
					.then((res) => {
						this.tableData = res?.rows || res.data;
						this.total = res?.total;
					})
					.finally(() => {
						// eslint-disable-next-line no-undef
						uni.hideLoading();
					});
			} else {
				// eslint-disable-next-line no-undef
				uni.hideLoading();
				console.error('this.request 为空');
			}
		},
		onPageChange({ current }) {
			this.pageNum = current;
			this.fetchTableData();
		},
		handleClickOk() {
			this._query();
			this.$refs.xhPopup.close();
		},
		getOptionItem(item, column) {
			const { valueMapList, key } = column;
			if (valueMapList) {
				return valueMapList.find((mItem) => mItem.value == item[key]);
			}
			return null;
		},
		getTextColorClass(item, column) {
			const oItem = this.getOptionItem(item, column);
			return oItem ? `${oItem.color}-color` : '';
		},
		getTextValue(item, column) {
			const { key } = column;
			const oItem = this.getOptionItem(item, column);
			return oItem ? oItem?.text : item[key] || '-';
		},
	},
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	width: 100%;
	overflow: hidden;
	.list-wrapper {
		overflow-y: auto;
		padding: 10px 10px 0 10px;
		overflow-x: hidden;
		flex-grow: 1;
		background: #ffffff;
		.empty-box {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.search-wrapper {
	display: flex;
}

.search-btn {
	color: $uni-text-color;
}

.searchIsActive {
	color: $uni-color-primary;
}

.popup-title {
	line-height: 45px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	height: 45px;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

.popup-footer {
	display: flex;

	button {
		flex-grow: 1;
		border-radius: 0;

		&:last-of-type {
			border-left: none;
		}
	}
}

.form-content {
	padding: 10px;
}

.btn-wrapper {
	display: flex;

	button {
		flex-grow: 1;
		border-radius: 0;

		&:last-of-type {
			border-left: none;

			&::after {
				border-left: none;
			}
		}

		&::after {
			border-radius: 0;
		}
	}
}
.list-item-wrapper {
	overflow-x: auto;
	width: calc(100vw - 20px);
	margin-bottom: 10px;
	.list-item-inner-wrapper {
		display: flex;
		width: max-content;
		.item-delete {
			display: flex;
			align-items: center;
			justify-content: center;
			background: $uni-color-error;
			width: 120px;
			color: #ffffff;
			font-weight: bold;
			margin-left: 1px;
			border-radius: 4px;
			margin-left: 8px;
		}
	}
}
.list-item {
	display: flex;
	flex-wrap: wrap;
	background: #ffffff;
	font-size: 14px;
	padding: 10px 10px 0 10px;
	border: 1px solid #a7a7a7;
	border-radius: 4px;
	width: calc(100vw - 20px);
	.column-item {
		display: flex;
		align-items: baseline;
		margin-bottom: 10px;
		.label {
			color: $uni-text-color-grey;
			text-align: right;
		}
		.text {
			color: $uni-text-color;
			flex: 1;
		}
		.success-color {
			color: $uni-color-success;
		}
		.error-color {
			color: $uni-color-error;
		}
	}
}
</style>
